<template>
    <div class="count_down--wrap">
        <n-progress type="line" :percentage="percentage" :height="12" border-radius="6px 6px 0 0"
            fill-border-radius="6px 0 6px 6px" processing>
            {{ seconds === 0 ? '倒计时结束' : `${seconds}s` }}
        </n-progress>
    </div>
</template>

<script setup lang='ts' name="CountDownProcess">
const seconds = ref(60);
const percentage = computed(() => {
    return Math.floor(seconds.value * 100 / 60);
})
const timer = setInterval(() => {
    if (seconds.value === 0) return;
    seconds.value--;
}, 1000);
onUnmounted(() => {
    clearInterval(timer);
})
</script>
<style scoped lang='scss'>
.count_down--wrap {
    width: 100%;
    margin-top: 1em;
}
</style>